<template>
  <div>
    <!-- 表格 -->
    <Grid>
      <template #toolbar-tools>
        <slot name="toolbar-tools"></slot>
      </template>
      <template #toolbar-actions>
        <slot name="title"></slot>
      </template>
      <template #operationslot="{ row }">
        <slot :row="row" name="operationslot"></slot>
      </template>
    </Grid>
  </div>
</template>

<script setup lang="ts">
import type { columnsType, RowType } from './type';

import type { PropType } from 'vue';
// 引入表格与类型
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { useFosoTable } from '#/hooks/useFosoTable';

// 引入删除图标

const props = defineProps({
  // 表格数据
  data: {
    type: Array as PropType<RowType[]>,
    default: () => [],
  },
  // 列表数据
  columns: {
    type: Array as PropType<columnsType[]>,
    default: () => [],
  },
  toolbarbuttonName: {
    type: String,
    default: '',
  },
  showAddButton: {
    type: Boolean,
    default: true,
  },
  showEditButton: {
    type: Boolean,
    default: true,
  },
  showDeleteButton: {
    type: Boolean,
    default: true,
  },
  addButtonText: {
    type: String,
    default: null,
  },
  requestApi: {
    type: Function as PropType<(params: any) => Promise<any>>,
    default: () => () => Promise.resolve({}),
  },
});
// 表格事件
const gridEvents = {};
const { tableConfig, data, columns } = useFosoTable({
  columns: props.columns as any,
  data: props.data,
  requestApi: props.requestApi,
});
// 表格实例
const [Grid, gridApi] = useVbenVxeGrid({
  gridEvents,
  gridOptions: tableConfig.value,
});
defineExpose({
  gridApi,
  data,
  columns,
});
</script>
